<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试结果 - 在线考试系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .exam-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .exam-title {
            font-size: 24px;
            font-weight: bold;
        }

        .result-content {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }

        .result-summary {
            flex: 1;
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .result-details {
            flex: 2;
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
            color: #4b6cb7;
        }

        .score-display {
            text-align: center;
            margin: 25px 0;
        }

        .total-score {
            font-size: 48px;
            font-weight: bold;
            color: #4b6cb7;
            margin-bottom: 10px;
        }

        .score-out-of {
            font-size: 18px;
            color: #777;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }

        .stat-item {
            background: #f9fafd;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #4b6cb7;
        }

        .stat-label {
            font-size: 14px;
            color: #777;
        }

        .correct .stat-value {
            color: #5cb85c;
        }

        .incorrect .stat-value {
            color: #d9534f;
        }

        .time-used .stat-value {
            color: #f0ad4e;
        }

        .chart-container {
            height: 200px;
            margin-top: 20px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 15px;
            padding: 0 20px;
        }

        .chart-bar {
            width: 60px;
            background: #4b6cb7;
            border-radius: 5px 5px 0 0;
            position: relative;
            transition: height 1s ease;
        }

        .chart-bar.correct {
            background: #5cb85c;
        }

        .chart-bar.incorrect {
            background: #d9534f;
        }

        .chart-bar.partial {
            background: #f0ad4e;
        }

        .chart-label {
            position: absolute;
            bottom: -25px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 14px;
        }

        .chart-value {
            position: absolute;
            top: -25px;
            left: 0;
            right: 0;
            text-align: center;
            font-weight: bold;
        }

        .question-item {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .question-title {
            font-size: 18px;
            font-weight: bold;
        }

        .question-type {
            color: #4b6cb7;
            font-weight: bold;
            padding: 4px 10px;
            background: #f0f4ff;
            border-radius: 4px;
            font-size: 14px;
        }

        .question-text {
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .answer-comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 15px;
        }

        .answer-box {
            padding: 15px;
            border-radius: 8px;
            background: #f9f9f9;
        }

        .answer-title {
            font-weight: bold;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .user-answer .answer-title {
            color: #4b6cb7;
        }

        .correct-answer .answer-title {
            color: #5cb85c;
        }

        .answer-content {
            line-height: 1.6;
        }

        .correct-icon {
            color: #5cb85c;
        }

        .incorrect-icon {
            color: #d9534f;
        }

        .score-info {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #eee;
        }

        .question-score {
            font-weight: bold;
        }

        .question-score.earned {
            color: #5cb85c;
        }

        .question-score.total {
            color: #777;
        }

        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            min-width: 120px;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background: #4b6cb7;
            color: white;
        }

        .btn-primary:hover {
            background: #3a559d;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid #4b6cb7;
            color: #4b6cb7;
        }

        .btn-outline:hover {
            background: #4b6cb7;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-success {
            background: #5cb85c;
            color: white;
        }

        .btn-success:hover {
            background: #449d44;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        footer {
            text-align: center;
            margin-top: 30px;
            color: #777;
            font-size: 14px;
        }

        .performance-tag {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 14px;
            font-weight: bold;
            margin-top: 10px;
        }

        .performance-excellent {
            background: #e1f7e3;
            color: #2e7d32;
        }

        .performance-good {
            background: #fff8e1;
            color: #f57c00;
        }

        .performance-average {
            background: #ffecb3;
            color: #ef6c00;
        }

        .performance-poor {
            background: #ffcdd2;
            color: #c62828;
        }

        @media (max-width: 900px) {
            .result-content {
                flex-direction: column;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }

            .answer-comparison {
                grid-template-columns: 1fr;
            }
        }

        @media print {
            .action-buttons {
                display: none;
            }

            body {
                background: white;
            }

            .result-summary,
            .result-details {
                box-shadow: none;
                border: 1px solid #ddd;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="exam-info">
                <div class="exam-title">期末考试 - 计算机科学 - 考试结果</div>
                <div class="student-info">考生: 张三 (20210001)</div>
            </div>
        </header>

        <div class="result-content">
            <div class="result-summary">
                <h2 class="section-title">考试概览</h2>

                <div class="score-display">
                    <div class="total-score" id="totalScore">0</div>
                    <div class="score-out-of">满分 100</div>
                    <div class="performance-tag performance-excellent" id="performanceTag">优秀</div>
                </div>

                <div class="stats-grid">
                    <div class="stat-item correct">
                        <div class="stat-value" id="correctCount">0</div>
                        <div class="stat-label">正确题目</div>
                    </div>
                    <div class="stat-item incorrect">
                        <div class="stat-value" id="incorrectCount">0</div>
                        <div class="stat-label">错误题目</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="answeredCount">0</div>
                        <div class="stat-label">已答题目</div>
                    </div>
                    <div class="stat-item time-used">
                        <div class="stat-value" id="timeUsed">00:00</div>
                        <div class="stat-label">考试用时</div>
                    </div>
                </div>

                <h3>题型得分分布</h3>
                <div class="chart-container" id="typeChart">
                    <!-- 图表将由JS生成 -->
                </div>
            </div>

            <div class="result-details">
                <h2 class="section-title">答题明细</h2>
                <div id="questionsReview">
                    <!-- 答题明细将由JS生成 -->
                </div>
            </div>
        </div>

        <div class="action-buttons">
            <button class="btn btn-primary" onclick="window.print()">
                <i class="fas fa-print"></i> 打印结果
            </button>
            <button class="btn btn-outline" id="exportBtn">
                <i class="fas fa-download"></i> 导出PDF
            </button>
            <button class="btn btn-success" onclick="location.href='review.html'">
                <i class="fas fa-redo"></i> 重新考试
            </button>
        </div>

        <footer>
            <p>© 2023 在线考试系统 | 确保考试公平公正</p>
        </footer>
    </div>

    <script>
        // 从本地存储获取考试数据或使用示例数据
        const examResults = JSON.parse(localStorage.getItem('examResults')) || {
            score: 82,
            totalScore: 100,
            correctCount: 16,
            incorrectCount: 4,
            answeredCount: 20,
            timeUsed: "01:25:36",
            details: [
                {
                    id: 1,
                    type: "单选题",
                    text: "下列哪项不是JavaScript的基本数据类型？",
                    userAnswer: 3,
                    correctAnswer: 3,
                    options: ["Number", "String", "Boolean", "Array"],
                    score: 2,
                    earned: 2,
                    status: "correct"
                },
                {
                    id: 2,
                    type: "单选题",
                    text: "CSS中用于设置元素外边框的属性是？",
                    userAnswer: 1,
                    correctAnswer: 0,
                    options: ["margin", "padding", "border", "outline"],
                    score: 2,
                    earned: 0,
                    status: "incorrect"
                },
                {
                    id: 3,
                    type: "多选题",
                    text: "以下哪些是CSS盒模型的组成部分？（多选）",
                    userAnswer: [0, 1, 2],
                    correctAnswer: [0, 1, 2, 3],
                    options: ["内容(content)", "内边距(padding)", "外边距(margin)", "边框(border)"],
                    score: 3,
                    earned: 2,
                    status: "partial"
                },
                {
                    id: 7,
                    type: "简答题",
                    text: "简述JavaScript中let、const和var声明的区别。",
                    userAnswer: "let和const是块级作用域，var是函数作用域。const用于声明常量，不可重新赋值。",
                    correctAnswer: "var是函数作用域，存在变量提升。let和const是块级作用域，不存在变量提升。const声明必须初始化，且不能重新赋值。let声明的变量可以重新赋值。",
                    score: 5,
                    earned: 4,
                    status: "partial"
                }
            ],
            typeStats: [
                { type: "单选题", correct: 4, total: 6, score: 8, totalScore: 12 },
                { type: "多选题", correct: 3, total: 5, score: 8, totalScore: 15 },
                { type: "判断题", correct: 4, total: 5, score: 4, totalScore: 5 },
                { type: "简答题", correct: 1, total: 4, score: 12, totalScore: 20 }
            ]
        };

        // 初始化页面
        function initResultPage() {
            // 更新考试概览
            document.getElementById('totalScore').textContent = examResults.score;
            document.getElementById('correctCount').textContent = examResults.correctCount;
            document.getElementById('incorrectCount').textContent = examResults.incorrectCount;
            document.getElementById('answeredCount').textContent = examResults.answeredCount;
            document.getElementById('timeUsed').textContent = examResults.timeUsed;

            // 设置表现标签
            const performanceTag = document.getElementById('performanceTag');
            const percentage = (examResults.score / examResults.totalScore) * 100;

            if (percentage >= 90) {
                performanceTag.className = 'performance-tag performance-excellent';
                performanceTag.textContent = '优秀';
            } else if (percentage >= 70) {
                performanceTag.className = 'performance-tag performance-good';
                performanceTag.textContent = '良好';
            } else if (percentage >= 60) {
                performanceTag.className = 'performance-tag performance-average';
                performanceTag.textContent = '及格';
            } else {
                performanceTag.className = 'performance-tag performance-poor';
                performanceTag.textContent = '不及格';
            }

            // 生成题型图表
            renderTypeChart();

            // 生成答题明细
            renderQuestionsReview();
        }

        // 渲染题型图表
        function renderTypeChart() {
            const chartContainer = document.getElementById('typeChart');
            chartContainer.innerHTML = '';

            examResults.typeStats.forEach(stat => {
                const percentage = (stat.score / stat.totalScore) * 100;
                const barHeight = percentage * 1.5; // 缩放比例

                const bar = document.createElement('div');
                bar.className = `chart-bar ${percentage > 80 ? 'correct' : percentage > 50 ? 'partial' : 'incorrect'}`;
                bar.style.height = `${barHeight}px`;

                const value = document.createElement('div');
                value.className = 'chart-value';
                value.textContent = `${Math.round(percentage)}%`;

                const label = document.createElement('div');
                label.className = 'chart-label';
                label.textContent = stat.type;

                bar.appendChild(value);
                bar.appendChild(label);
                chartContainer.appendChild(bar);
            });
        }

        // 渲染答题明细
        function renderQuestionsReview() {
            const container = document.getElementById('questionsReview');
            container.innerHTML = '';

            examResults.details.forEach(question => {
                const questionEl = document.createElement('div');
                questionEl.className = 'question-item';

                // 题目头部
                const header = document.createElement('div');
                header.className = 'question-header';

                const title = document.createElement('div');
                title.className = 'question-title';
                title.textContent = `题目 #${question.id}`;

                const type = document.createElement('div');
                type.className = 'question-type';
                type.textContent = question.type;

                header.appendChild(title);
                header.appendChild(type);

                // 题目文本
                const text = document.createElement('div');
                text.className = 'question-text';
                text.innerHTML = `<p>${question.text}</p>`;

                // 答案对比
                const comparison = document.createElement('div');
                comparison.className = 'answer-comparison';

                // 用户答案
                const userAnswerBox = document.createElement('div');
                userAnswerBox.className = 'answer-box user-answer';

                const userTitle = document.createElement('div');
                userTitle.className = 'answer-title';

                const userIcon = document.createElement('i');
                userIcon.className = question.status === 'correct' ?
                    'fas fa-check-circle correct-icon' :
                    question.status === 'partial' ?
                        'fas fa-exclamation-circle partial-icon' :
                        'fas fa-times-circle incorrect-icon';

                userTitle.appendChild(userIcon);
                userTitle.appendChild(document.createTextNode('您的答案'));

                const userContent = document.createElement('div');
                userContent.className = 'answer-content';
                userContent.textContent = formatAnswer(question, 'user');

                userAnswerBox.appendChild(userTitle);
                userAnswerBox.appendChild(userContent);

                // 正确答案
                const correctAnswerBox = document.createElement('div');
                correctAnswerBox.className = 'answer-box correct-answer';

                const correctTitle = document.createElement('div');
                correctTitle.className = 'answer-title';

                const correctIcon = document.createElement('i');
                correctIcon.className = 'fas fa-check-circle correct-icon';

                correctTitle.appendChild(correctIcon);
                correctTitle.appendChild(document.createTextNode('正确答案'));

                const correctContent = document.createElement('div');
                correctContent.className = 'answer-content';
                correctContent.textContent = formatAnswer(question, 'correct');

                correctAnswerBox.appendChild(correctTitle);
                correctAnswerBox.appendChild(correctContent);

                comparison.appendChild(userAnswerBox);
                comparison.appendChild(correctAnswerBox);

                // 得分信息
                const scoreInfo = document.createElement('div');
                scoreInfo.className = 'score-info';

                const earned = document.createElement('div');
                earned.className = 'question-score earned';
                earned.textContent = `得分: ${question.earned}`;

                const total = document.createElement('div');
                total.className = 'question-score total';
                total.textContent = `满分: ${question.score}`;

                scoreInfo.appendChild(earned);
                scoreInfo.appendChild(total);

                // 组装题目元素
                questionEl.appendChild(header);
                questionEl.appendChild(text);
                questionEl.appendChild(comparison);
                questionEl.appendChild(scoreInfo);

                container.appendChild(questionEl);
            });
        }

        // 格式化答案显示
        function formatAnswer(question, answerType) {
            const answer = answerType === 'user' ? question.userAnswer : question.correctAnswer;

            if (question.type === '单选题' || question.type === '多选题') {
                if (Array.isArray(answer)) {
                    return answer.map(idx => `${String.fromCharCode(65 + idx)}. ${question.options[idx]}`).join(', ');
                } else {
                    return `${String.fromCharCode(65 + answer)}. ${question.options[answer]}`;
                }
            } else if (question.type === '判断题') {
                return answer === 1 ? '正确' : '错误';
            } else {
                return answer || '未作答';
            }
        }

        // 初始化页面
        window.onload = initResultPage;

        // 导出PDF功能（模拟）
        document.getElementById('exportBtn').addEventListener('click', function () {
            alert('PDF导出功能正在开发中，当前版本请使用打印功能。');
        });
    </script>
</body>

</html>